<template>
  <div class="container">
    <div class="barchart" ref="bar_ref"></div>
    <div class="piechart" ref="pie_ref"></div>
  </div>
</template>

<script>
export default {
  props: ["value"],
  data() {
    return {
      chartInstance:null,
      areaName: ["上游", "中游", "下游"],
      year: [
        2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011,
        2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
      ],
      upData: [
        698, 772, 796, 824, 803, 729, 733, 799, 772, 797, 736, 758, 774, 805,
        747, 769, 760, 822, 798, 783, 815, 835,
      ],
      middleData: [
        566, 634, 663, 653, 637, 605, 609, 636, 612, 631, 603, 628, 654, 679,
        643, 665, 626, 652, 661, 643, 646, 666,
      ],
      downData: [
        529, 551, 585, 561, 564, 555, 561, 572, 549, 566, 536, 610, 591, 607,
        608, 626, 586, 603, 607, 577, 596, 609,
      ],
    };
  },
  mounted() {

  },
  beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    barChart(value) {
      //求出对应年份的索引
      var index = this.year.findIndex((e) => e === value);
      const resData = [
        this.upData[index],
        this.middleData[index],
        this.downData[index],
      ];
      //初始化图表
      this.chartInstance = this.$echarts.init(this.$refs.bar_ref);
      const initOption = {
        title: {
          text: `年净初级生产力(NPP)`,
          left: "center",
          top: "2%",
          textStyle:{
            color:'#fff',
            fontSize:"18px",
            fontFamily:'华文楷体',
          }
        },
        //高亮显示
        tooltip: {
          //触发条件，鼠标移入坐标轴
          trigger: "axis",
          //高亮类型
          axisPointer: {
            //线条
            type: "line",
            z: 0,
            lineStyle: {
              type: "solid",
              color: "#2D3443",
            },
          },
          backgroundColor: "rgba(16,12,42,0.9)",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: this.areaName,          
          },
        ],
        yAxis: [
          {
            type: "value",
            max: 900,
          },
        ],
        series: [
          {
            name: "npp",
            type: "bar",
            barWidth: "50%",
            data: resData,
            itemStyle: {
              //柱状图圆角
              borderRadius: [10, 10, 0, 0],
              //设置颜色渐变
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: "#F1844C" }, //0%位置
                { offset: 1, color: "#88FF13" }, //100%位置
              ]),
            },
            label: {
              //数值标签
              show: true,
              position: "top",
              fontSize: 16,
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    pieChart(value) {
      //求出对应年份的索引
      var index = this.year.findIndex((e) => e === value);
      //求出各流域占比
      const upPercent = (
        this.upData[index] /
        (this.upData[index] + this.middleData[index] + this.downData[index])
      ).toFixed(3);
      const middlePercent = (
        this.middleData[index] /
        (this.upData[index] + this.middleData[index] + this.downData[index])
      ).toFixed(3);
      const downPercent = (
        this.downData[index] /
        (this.upData[index] + this.middleData[index] + this.downData[index])
      ).toFixed(3);
      this.chartInstance = this.$echarts.init(this.$refs.pie_ref);
      const op = {
        title: {
          text: `占比情况`,
          left: "center",
          top: "2%",
          textStyle:{
            color:'#fff',
            fontSize:"18px",
            fontFamily:'华文楷体',
          }
        },
        //高亮显示
        tooltip: {
          //触发条件，鼠标移入坐标轴
          trigger: "item",
          //高亮类型
          axisPointer: {
            //线条
            type: "line",
            z: 0,
            lineStyle: {
              type: "solid",
              color: "#2D3443",
            },
          },
          backgroundColor: "rgba(16,12,42,0.9)",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          bottom: "2%",
          left: "center",
        },
        series: [
          {
            name: "占比%",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: "false",
              position: "center",
            },
            emphasis: {
              label: {
                show: "true",
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: upPercent * 100, name: "上游" },
              { value: middlePercent * 100, name: "中游" },
              { value: downPercent * 100, name: "下游" },
            ],
          },
        ],
      };
      this.chartInstance.setOption(op);
    },
    //给地图组件传数据
    sendDataToMap(selectYear) {
      const nppData = {
        selectYear: selectYear,
        area: this.areaName,
        year: this.year,
        upData: this.upData,
        middleData: this.middleData,
        downData: this.downData,
      };
      this.$bus.$emit("nppData", nppData);
    },
    //销毁图表
    disposeChart() {
      // 安全销毁图表实例
      if (this.barchartInstance) {
        try {
          this.barchartInstance.dispose();
        } catch (error) {
          console.error("Error disposing bar chart:", error);
        } finally {
          this.barchartInstance = null;
        }
      }

      if (this.piechartInstance) {
        try {
          this.piechartInstance.dispose();
        } catch (error) {
          console.error("Error disposing pie chart:", error);
        } finally {
          this.piechartInstance = null;
        }
      }
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.barchart {
  width: 280px;
  height: 250px;
  flex: 0.5;
}
.piechart {
  width: 280px;
  height: 250px;
  flex: 0.5;
}
</style>